<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ course.title }} - 课程统计</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .chart-container {
            height: 400px;
            margin: 2rem 0;
        }
        .review-item {
            border-bottom: 1px solid #eee;
            padding: 1rem 0;
        }
        .review-item:last-child {
            border-bottom: none;
        }
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 3px;
            background-color: #007bff;
        }
        .rating {
            color: #ffc107;
        }
        .module-form {
            background-color: #f8f9fa;
            padding: 1.5rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fa fa-graduation-cap text-primary me-2"></i>
                智能学习平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/teacher/dashboard">教师中心</a>
                    </li>
                </ul>
                <div class="navbar-nav">
                    <span class="nav-item nav-link">欢迎，{{ user.name }}</span>
                    <a class="nav-link" href="/logout" onclick="event.preventDefault(); fetch('/logout').then(() => window.location.href='/')">
                        <i class="fa fa-sign-out me-1"></i>退出登录
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <h1>{{ course.title }} - 课程统计</h1>

        <!-- 课程基本信息 -->
        <div class="row mb-5">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">课程信息</h5>
                        <p><strong>难度级别：</strong>{{ course.difficulty }}</p>
                        <p><strong>报名人数：</strong>{{ course.enrollment_count }}</p>
                        <p><strong>总体完课率：</strong>{{ course.completion_rate }}%</p>
                        <p><strong>课程评分：</strong>
                            <span class="rating">
                                {% for i in range(5) %}
                                    {% if i < course.rating | int %}★{% else %}☆{% endif %}
                                {% endfor %}
                            </span>
                            {{ course.rating }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <!-- 添加课程模块 -->
                <div class="module-form">
                    <h5 class="mb-3">添加课程模块</h5>
                    <form id="addModuleForm">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label for="moduleTitle" class="form-label">模块标题</label>
                                <input type="text" class="form-control" id="moduleTitle" required>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="moduleDuration" class="form-label">时长（分钟）</label>
                                <input type="number" class="form-control" id="moduleDuration" min="10" required>
                            </div>
                            <div class="col-md-1 d-flex align-items-end">
                                <button type="submit" class="btn btn-primary">添加</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 完课率图表 -->
        <div class="card mb-5">
            <div class="card-header">
                <h5 class="mb-0">模块完课率统计</h5>
            </div>
            <div class="card-body">
                <div class="chart-container text-center">
                    <img src="{{ chart_url }}" alt="模块完课率图表" class="img-fluid">
                </div>
            </div>
        </div>

        <!-- 学生评价 -->
        <div class="card mb-5">
            <div class="card-header">
                <h5 class="mb-0">学生匿名评价</h5>
            </div>
            <div class="card-body">
                {% if reviews %}
                    {% for review in reviews %}
                    <div class="review-item">
                        <div class="d-flex justify-content-between">
                            <h6>匿名用户 {{ review.id }}</h6>
                            <small class="text-muted">{{ review.date }}</small>
                        </div>
                        <div class="rating mb-2">
                            {% for i in range(review.rating) %}★{% endfor %}
                        </div>
                        <p>{{ review.comment }}</p>
                    </div>
                    {% endfor %}
                {% else %}
                    <p>暂无学生评价</p>
                {% endif %}
            </div>
        </div>

        <!-- 返回按钮 -->
        <a href="/teacher/dashboard" class="btn btn-primary">
            <i class="fa fa-arrow-left me-2"></i>返回教师中心
        </a>
    </div>

    <footer class="bg-dark text-white py-5 mt-8">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5>关于我们</h5>
                    <p>智能学习平台致力于提供高质量的在线教育资源，助力每一位学习者成长。</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/" class="text-white">首页</a></li>
                        <li><a href="/login" class="text-white">登录</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>联系我们</h5>
                    <p>邮箱: contact@example.com</p>
                </div>
            </div>
            <div class="border-top pt-3 mt-4 text-center">
                <p>&copy; 2025 智能学习平台 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 添加课程模块
        document.getElementById('addModuleForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            const courseId = {{ course.id }};
            const title = document.getElementById('moduleTitle').value;
            const duration = document.getElementById('moduleDuration').value;

            if (!title || !duration) {
                alert('请填写模块标题和时长');
                return;
            }

            try {
                const formData = new FormData();
                formData.append('title', title);
                formData.append('duration', duration);

                const response = await fetch(`/teacher/course/${courseId}/add_module`, {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();

                if (data.success) {
                    alert(data.message);
                    window.location.reload();
                } else {
                    alert(data.message);
                }
            } catch (error) {
                console.error('添加模块失败:', error);
                alert('添加模块失败，请重试');
            }
        });
    </script>
</body>
</html>
